{% extends 'layout.html' %}
{% block title %}任务管理{% endblock %}
{% block content %}
<div class="container">
<div class="panel panel-default">
  <div class="panel-heading">新建任务</div>
  <div class="panel-body">
 <form id="formAdd"><!--关掉浏览器做的校验-->
 <div class="clearfix">
  {% for field in form %}
      <div class="col-xs-6">
      <div class="form-group" style="position: relative ;margin-bottom: 20px">
    <label>{{ field.label }}</label>
          {{ field }}
          <span class="error_msg" style="color: red ; position: absolute;"></span>
  <!--  <input type="text" class="form-control" name="user" placeholder="请输入用户姓名" style="margin-bottom: 10px">-->
  </div>
  </div>
  {% endfor %}
 <div class="col-xs-12">
{#      <button id="btnAdd" type="button" class="btn btn-primary">提 交</button>#}
    <button id="btnAdd" type="button" class="btn btn-primary">提 交</button>
 </div>
 </div>
 </form>
  </div>
</div>
<div class="panel panel-default">
                <div class="panel-heading"><span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> 任务列表
                </div>
                <div class="panel-body">
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>标题</th>
                            <th>级别</th>
                            <th>负责人</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for item in page_queryset %}
                            <tr>
                                <th scope="row">{{ item.id }}</th>
                                <td>{{ item.title }}</td>
                                <td>{{ item.get_level_display }}</td>
                                <td>{{ item.user.username }}</td>
                                <td><a class="btn btn-primary btn-xs" href="/admin/{{ item.id }}/edit/">编辑</a>
                                    <a class="btn btn-danger btn-xs" href="/admin/{{ item.id }}/delete/">删除</a></td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
<ul class="pagination" style="float: left">
    {{ page_string }}
</ul>
<div style="height: 2000px"></div>
<hr/>
    <h1>Ajax学习</h1>
<h1>任务管理</h1>
<h3>示例1</h3>
{#    onclick="clickMe();"#}
<input type="button" class="btn btn-primary" id="btn1" value="点击1" >
<h3>示例2</h3>
<input type="text" id="txtUser" placeholder="姓名">
<input type="text" id="txtAge" placeholder="年龄">
<input type="button" class="btn btn-primary" id="btn2" value="点击2" >
<h3>示例3</h3>
    <form  id="form3">
<input type="text" name="user" placeholder="姓名">
<input type="text" name="age" placeholder="年龄">
<input type="text" name="email" placeholder="邮箱">
<input type="text" name="more" placeholder="介绍">
<input type="button" class="btn btn-primary" id="btn3" value="点击3" >
        </form>
</div>
{% endblock %}
{% block js %}
    <script type="text/javascript">
    $(function (){
        {#页面框架加载完成之后代码自动执行#}
        bindBtn1Event();
        bindBtn2Event();
        bindBtn3Event();
        bindBtnAddEvent();
    })
    function bindBtn1Event(){
        $('#btn1').click(function (){
             $.ajax({
            url: '/task/ajax/',
            type:"post",
            data:{
                n1:123,
                n2:456
            },
                 dataType: "JSON",
            success:function (res){
                console.log(res);
                console.log(res.status);
                console.log(res.data);
            }
        })
        })
    }
     function bindBtn2Event(){
        $('#btn2').click(function (){
             $.ajax({
            url: '/task/ajax/',
            type:"post",
            data:{
                name:$("#txtUser").val(),
                age:$("#txtAge").val()
            },
                 dataType: "JSON",
            success:function (res){
                console.log(res);
                console.log(res.status);
                console.log(res.data);
            }
        })
        })
    }
    function bindBtn3Event(){
        $('#btn3').click(function (){
             $.ajax({
            url: '/task/ajax/',
            type:"post",
            data: $('#form3').serialize(),
                 dataType: "JSON",
            success:function (res){
                console.log(res);
                console.log(res.status);
                console.log(res.data);
            }
        })
        })
    }
     function bindBtnAddEvent(){
        $('#btnAdd').click(function (){
            $(".error_msg").empty();
            {#$(".error_msg").text("");#}
             $.ajax({
            url: '/task/add/',
            type: "post",
            data: $('#formAdd').serialize(),
                 dataType: "JSON",
            success:function (res){
                if (res.status){
                    alert("添加成功")
                    {#用JS实现页面的刷新#}
                    location.reload()
                }else{
                    $.each(res.error,function (name,data){
                        {#console.log(name,data)#}
                        $("#id_"+name).next().text(data[0])
                    })
                }
            }
        })
        })
    }
    {#function clickMe() {#}
    {#    $.ajax({#}
    {#        url: '/task/ajax/',#}
    {#        type:"post",#}
    {#        data:{#}
    {#            n1:123,#}
    {#            n2:456#}
    {#        },#}
    {#        success:function (res){#}
    {#            console.log(res);#}
    {#        }#}
    {#    })#}
    {# }#}
    </script>
{% endblock %}